<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { getCustomerInquiryInfo } from "@/api/inquiryApi";
import { getEmployeeInfoByType } from "@/api/departmentApi";
import { useUserStoreHook } from "@/store/modules/user";
const router = useRouter();
//表格数据
const tableData = ref();
const orderAudit = ref({
  note: "描述",
  reason: "原因",
  status: "2"
});
const user = useUserStoreHook();
//对话框
//添加运费
const dialogFormVisible = ref(false);
//申请创建销售订单
const dialogFormVisible1 = ref(false);
//创建销售订单审核
const dialogFormVisible2 = ref(false);

function close() {}

//跳转到详情页面
function toDetail(id) {
  router.push({ path: "/inquiry/customerInquiryDetail", query: { id } });
}
//跳转到创建询价单页面

function toSaleInquiry(row) {
  router.push({ path: "/inquiry/saleInquiry", query: row });
}
//
async function getSaleInfoByType() {
  let res = await getEmployeeInfoByType(2);
  saleList.value = res.data;
}
//查询询价单
const queryData = ref({
  company: "",
  mobile: "",
  saleName: "",
  saleId: "",
  status: ""
});
const saleList = ref();
//询价单状态
const options = [
  {
    value: "1",
    label: "待报价"
  },
  {
    value: "2",
    label: "已报价"
  },
  {
    value: "3",
    label: "确认签约"
  },
  {
    value: "4",
    label: "拒绝合作"
  },
  {
    value: "5",
    label: "创建订单审核中"
  },
  {
    value: "6",
    label: "创建订单未通过"
  },
  {
    value: "7",
    label: "创建订单通过"
  }
];

//查询询价单
async function getInquiryInfo(queryData) {
  let res = await getCustomerInquiryInfo(queryData);
  if (res.code === 200) {
    tableData.value = res.data.data;
  }
}
onMounted(() => {
  getInquiryInfo(queryData.value);
  getSaleInfoByType();
});
function selectData() {
  getInquiryInfo(queryData.value);
}

//重置请求条件
function reset() {
  queryData.value = {
    company: "",
    mobile: "",
    saleName: "",
    saleId: "",
    status: ""
  };
}
</script>

<template>
  <div>
    <el-card>
      <div>
        <div style="height: 50px; margin-top: 20px; margin-left: 5px">
          <span>客户公司名称:</span>
          <el-input
            v-model="queryData.company"
            style="width: 240px; margin-right: 8px"
            placeholder="请输入"
          />
          <span>所属销售:</span>
          <el-select
            v-if="user.roles[0] == 'admin'"
            v-model="queryData.saleId"
            placeholder="请输入"
            size="large"
            style="width: 240px; margin-right: 8px"
          >
            <el-option
              v-for="item in saleList"
              :key="item.id"
              :label="item.realName"
              :value="item.id"
            />
          </el-select>
          <el-select
            v-else
            v-model="queryData.saleId"
            placeholder="请输入"
            size="large"
            style="width: 240px; margin-right: 8px"
          />

          <span>状态:</span>
          <el-select
            v-model="queryData.status"
            placeholder="全部"
            size="large"
            style="width: 240px; margin-right: 8px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button type="primary" @click="selectData">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </div>
        <div style="height: 50px; margin-top: 20px; float: right">
          <el-button type="primary" @click="toSaleInquiry">添加</el-button>
        </div>
      </div>
    </el-card>

    <el-table
      :data="tableData"
      border
      style="width: 100%; margin-top: 30px"
      max-height="430"
    >
      <el-table-column
        align="center"
        prop="code"
        label="询价编号"
        width="110"
        header-align="center"
      />
      <el-table-column
        align="center"
        prop="type"
        label="类型"
        width="100"
        header-align="center"
      >
        <template #default="scoped">
          <el-text v-if="scoped.row.type == 1">询价单</el-text>
          <el-text v-else>咨询单</el-text>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="company"
        label="客户公司名称"
        header-align="center"
        width="150"
      />
      <el-table-column
        align="center"
        prop="saleName"
        label="所属销售"
        header-align="center"
        width="100"
      />
      <el-table-column
        align="center"
        prop="status"
        label="状态"
        header-align="center"
        width="120"
      >
        <template #default="{ row }">
          <span v-if="row.status == 1">待报价 </span>
          <span v-else-if="row.status == 2">已报价</span>
          <span v-else-if="row.status == 3">确认签约</span>
          <span v-else-if="row.status == 4">拒绝合作</span>
          <span v-else-if="row.status == 5">创建订单审核中</span>
          <span v-else-if="row.status == 6">创建订单未通过</span>
          <span v-else-if="row.status == 7">创建订单通过</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="note"
        label="修改描述"
        header-align="center"
        width="130"
      />
      <el-table-column
        align="center"
        prop="reason"
        label="原因"
        header-align="center"
        width="130"
      />
      <el-table-column
        label="操作"
        header-align="center"
        align="center"
        fixed="right"
        width="430"
      >
        <template v-slot="{ row }">
          <el-button size="small" @click="toDetail(row.id)"> 详情 </el-button>
          <el-button
            v-if="row.status == 1"
            size="small"
            @click="toSaleInquiry(row)"
          >
            创建询价单
          </el-button>
          <el-button v-if="row.status == 3" size="small">
            创建采购单
          </el-button>
          <el-button
            v-if="row.status == 1"
            size="small"
            @click="dialogFormVisible = true"
          >
            添加运费
          </el-button>
          <el-button
            v-if="row.status == 3"
            size="small"
            @click="dialogFormVisible1 = true"
          >
            申请创建销售订单
          </el-button>
          <el-button v-if="row.status == 3" size="small">
            创建销售订单
          </el-button>
          <el-button
            v-if="row.status == 3"
            size="small"
            @click="dialogFormVisible2 = true"
          >
            销售创建订单审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      size="small"
      background
      layout="total ,sizes,prev, pager,next, jumper, ->,"
      :total="10"
      :page-sizes="[10, 20, 30, 40]"
      style="float: right; margin-top: 20px"
    />
    <div>
      <!-- 添加运费 -->
      <el-dialog
        v-model="dialogFormVisible"
        title="添加运费"
        width="440"
        @close="close"
      >
        <el-form :model="tableData">
          <el-form-item label="运费金额(单位：$):">
            <el-input v-model="tableData[0].yunfei" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 申请创建销售订单 -->
      <el-dialog
        v-model="dialogFormVisible1"
        title="申请创建销售订单"
        width="500"
      >
        <el-form :model="tableData">
          <el-form-item label="描述:">
            <el-input
              v-model="tableData.note"
              style="width: 240px"
              :rows="2"
              type="textarea"
              placeholder="多行输入"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取消</el-button>
            <el-button type="primary" @click="dialogFormVisible1 = false">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 创建销售订单审核 -->
      <el-dialog
        v-model="dialogFormVisible2"
        title="申请创建销售订单"
        width="500"
      >
        <el-form :model="orderAudit">
          <el-form-item label="描述:">
            <el-input v-model="orderAudit.note" autocomplete="off" />
          </el-form-item>
          <el-form-item label="审核:">
            <el-radio-group v-model="orderAudit.status">
              <el-radio value="1">审核通过</el-radio>
              <el-radio label="2">审核不通过</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="原因:">
            <el-input
              v-model="orderAudit.reason"
              style="width: 240px"
              :rows="2"
              type="textarea"
              placeholder="多行输入"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false">取消</el-button>
            <el-button type="primary" @click="dialogFormVisible2 = false">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
